<template>
	<view>
		<view class="wordTitle">
			<slot name="titleName"></slot>
			<view class="clearBtn" @click="$emit('open')" v-if="bool">
				<text>清除</text>
				<svg t="1639192201735" class="icon" viewBox="0 0 1024 1024" version="1.1"
					xmlns="http://www.w3.org/2000/svg" p-id="2531" width="14" height="14">
					<path
						d="M861.184 192.512q30.72 0 50.688 10.24t31.744 25.6 16.384 33.28 4.608 33.28q0 7.168-0.512 11.264t-0.512 7.168l0 6.144-67.584 0 0 537.6q0 20.48-8.192 39.424t-23.552 33.28-37.376 23.04-50.688 8.704l-456.704 0q-26.624 0-50.176-8.192t-40.448-23.04-26.624-35.84-9.728-47.616l0-527.36-63.488 0q-1.024-1.024-1.024-5.12-1.024-5.12-1.024-31.744 0-13.312 6.144-29.696t18.432-30.208 31.744-23.04 46.08-9.216l91.136 0 0-62.464q0-26.624 18.432-45.568t45.056-18.944l320.512 0q35.84 0 49.664 18.944t13.824 45.568l0 63.488q21.504 1.024 46.08 1.024l47.104 0zM384 192.512l320.512 0 0-64.512-320.512 0 0 64.512zM352.256 840.704q32.768 0 32.768-41.984l0-475.136-63.488 0 0 475.136q0 21.504 6.656 31.744t24.064 10.24zM545.792 839.68q17.408 0 23.552-9.728t6.144-31.232l0-475.136-63.488 0 0 475.136q0 40.96 33.792 40.96zM738.304 837.632q18.432 0 24.576-9.728t6.144-31.232l0-473.088-64.512 0 0 473.088q0 40.96 33.792 40.96z"
						p-id="2532" fill="#9b9b9b"></path>
				</svg>
			</view>
		</view>
		<view class="words" v-if="list">
			<text @click="$emit('updata-searchValue',item.kw)" class="word" v-for="(item,index) in list"
				:key="index">{{item.kw}}</text>
		</view>
		<view class="not" v-else>
			还没有任何搜索记录
		</view>
	</view>
</template>

<script>
	export default {
		name: "words",
		props: {
			list: null,
			bool: null,
		},
		methods: {
			
		}
	}
</script>

<style lang="less">
	.wordTitle {
		color: #9b9b9b;
		display: flex;
		justify-content: space-between;
		padding: 3vw;
		margin-top: 3vw;

		.clearBtn {
			display: flex;
			align-items: center;
		}
	}

	.words {
		padding: 3vw;
		padding-top: 0;
		display: flex;
		flex-wrap: wrap;

		.word {
			color: #e6e6e6;
			padding: 1.5vw 2vw;
			font-size: 24rpx;
			background-color: rgba(255, 255, 255, 0.1);
			line-height: 50rpx;
			margin: 2vw 0;
			margin-right: 4vw;
		}
	}
	.not{
		text-align: center;
		color: #9b9b9b;
	}
</style>
